.hotBox {
  @apply w-full flex flex-nowrap relative;
  height: 11.25rem;

  .arrow {
    @apply cursor-pointer opacity-70 w-8 h-8 top-2/4 absolute;
    z-index: var(--content-index);
    margin-top: -1rem;

    &:hover {
      @apply opacity-100;
    }

    &.arrowLeft {
      left: -2rem;
    }

    &.arrowRight {
      right: -0.75rem;
    }
  }

  .hotItem {
    @apply cursor-pointer rounded-lg mr-3 relative;
    height: 11.25rem;
    background-image: url('/images/hot_bg.png');
    background-size: 100% 100%;
    background-position: center;
    padding: 1rem 1.25rem 1.125rem;

    &.hotItemHide {
      @apply opacity-0;
    }

    .status {
      @apply text-center text-white absolute bg-bg66 rounded;
      width: 4.125rem;
      height: 1.875rem;
      line-height: 1.875rem;
      top: 0.625rem;
      right: 0.625rem;

      &.statusLiving {
        @apply bg-theme;
      }

      &.statusNotStart {
        background: #339cff;
      }
    }

    .hotTitle {
      @apply text-base leading-6 text-white text-center;
    }

    .hotDate {
      @apply text-sm text-c99 text-center;
      margin-top: 0.375rem;
      margin-bottom: 1.125rem;
    }

    .teamBox {
      @apply flex items-center justify-between;
      height: 4.875rem;

      .teamItem {
        @apply text-base text-white flex flex-col justify-center items-center;
        width: 6rem;

        & > img {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
        }

        & > span {
          @apply inline-block w-full text-center text-sm;
          margin-top: 0.625rem;
        }
      }

      .teamCenter {
        @apply text-xl text-white whitespace-nowrap;
      }

      .teamRight {
        @apply text-sm text-white;

        .order {
          @apply text-center h-7 text-theme;
          width: 3.875rem;
          line-height: 1.75rem;
          border: 1px solid var(--theme-color);
          border-radius: 1.875rem;
        }

        .teamItem {
          height: 2.125rem;
          line-height: 2.125rem;

          &.teamItemLive {
            @apply text-theme;
          }
        }
      }

      .onlyTitle {
        @apply text-center text-white w-full;
      }
    }
  }
}

// 最大屏幕
@media screen and (min-width: 120rem) {
  .hotBox {
    .hotItem {
      width: 27.75rem;
    }
  }
}

// 4个
@media screen and (min-width: 91.5625rem) and (max-width: 120rem) {
  .hotBox {
    .hotItem {
      width: calc(calc(100vw - 9rem) / 4);
    }
  }
}

// 3个排布
@media screen and (min-width: 63.0625rem) and (max-width: 91.5rem) {
  .hotBox {
    .hotItem {
      width: calc(calc(100vw - 8.25rem) / 3);
    }
  }
}

// 2个排布
@media screen and (min-width: 767px) and (max-width: 63rem) {
  .hotBox {
    .hotItem {
      width: calc(calc(100vw - 7.5rem) / 2);
    }
  }
}

// 移动端排布
@media screen and (max-width: 767px) {
  .hotBox {
    @apply w-screen px-4;

    .hotItem {
      width: 100%;
    }
  }
}
